<template>
    <div :id="chartRef" class="chart-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    options: {
        required: true,
        type: Object
    }
})

const styleOptions = {}

const chartRef = ref(Math.random().toString(36).substring(2)); // 生成唯一ID
let chartInstance = null;


// 初始化图表
const initChart = () => {
    const dom = document.getElementById(chartRef.value);
    if (!dom) return;

    chartInstance = echarts.init(dom);
    chartInstance.setOption(styleOptions);
    chartInstance.setOption(props.options);
    
};

onMounted(initChart);
watch(() => props.options, initChart, { deep: true });
</script>